<script setup>
import {ref} from 'vue'
import {onMounted} from "vue";
import {gsap} from 'gsap';
import router from "@/router/index.js";
import useTokenStore from "@/stores/User/token.js";
import axios from "axios";
import {ElMessage} from "element-plus";

// 存储显示状态
localStorage.setItem('show', 'true')

const tokenStore = useTokenStore();
const account = ref('')
const password = ref('')
// 登录并生成令牌
const toHome = async () => {
  try {
    let formData = new FormData();
    formData.append("username", account.value);
    formData.append("password", password.value);
    const requestOptions = {
      method: 'post',
      url: '/login',
      baseURL: 'http://localhost:8080',
      data: formData
    }

    await axios(requestOptions).then(response => {
      if (response.data.code === 10200) {
        tokenStore.setToken(response.data.data.token)
        localStorage.setItem('token', response.data.data.token);
        console.log(tokenStore.loginToken)
        router.push('/home')
        ElMessage({
          type: 'success',
          message: `登录成功,欢迎您${account.value}`
        })
      } else if (response.data.code === 10402) {
        ElMessage({
          type: 'warning',
          message: `账号或密码错误！`
        })
      }
      console.log(response)
    })
  } catch (e) {
    console.log(e)
  }
}

// 页面加载动画
onMounted(() => {
  gsap.from('.cat', {duration: 2, y: -300, rotate: 720, ease: 'bounce.out'})
})
const toRegister = () => {
  router.push('register')
}
const toForget = () => {
  router.push('forget')
}
//猫猫移动动画
const catMove = () => {
  let timeline = gsap.timeline()
  timeline.to('.cat', {duration: 2, y: -250, ease: 'bounce.in'})
  timeline.to('.cat', {duration: 2, y: 0, ease: 'bounce.out'})
}

</script>

<template>
  <div>
    <div class="icon flex flex-col items-center justify-center mt-44">
      <img src="../../assets/icon/cat.png" alt="喵喵喵" class="cat" @click="catMove">
      <div>来登录叭~</div>
    </div>
    <div class="flex justify-center m-6">
      <div class="input flex flex-col items-center justify-center">
        <div class="account flex">
          <div class="m-6 flex items-center w-20">账号</div>
          <el-input v-model="account" placeholder="请输入账号喵~" class="w-60 m-6"/>
        </div>
        <div class="password flex">
          <div class="m-6 flex items-center w-20">密码</div>
          <el-input v-model="password" placeholder="请输入密码喵~" class="w-60 m-6" type="password" show-password/>
        </div>
      </div>
      <div class="signup flex items-center ml-8">
        <el-button class="w-12" @click="toHome">登录</el-button>
      </div>
    </div>
    <div class="forget flex flex-col justify-center items-center">
      <el-link :underline='false' class="m-2" @click="toRegister">没有账号？注册一个！</el-link>
      <el-link :underline='false' class="m-2" @click="toForget">忘记密码？试试找回！</el-link>
    </div>
    <div class="fastLogin flex justify-center m-6">
      <div class="w-80 flex justify-between">
        <div class="flex items-center">快捷登录</div>
        <el-link :underline='false' class="m-2"><img src="../../assets/icon/QQ.png" alt="QQ" class="w-12"></el-link>
        <el-link :underline='false' class="m-2"><img src="../../assets/icon/WeChat.png" alt="WeChat" class="w-12">
        </el-link>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>